﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<PhotoGallery.Core.Business.PicNode>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	重庆市公安图片管理系统--上传文件信息
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
	<div id="list-right">
		<table width="100%" cellspacing="5" cellpadding="0" border="0">
			<tbody>
				<tr>
					<td valign="top" class="s-box" id="list-left" style="width: 320px">
						<div class="head">
							文件目录</div>
						<div class="con">
							<div style="height: 200px;">
								<ul>
									<li>根目录</li>
								</ul>
								<div id="tree" class="demo">
								</div>
							</div>
						</div>
					</td>
					<td>
						<div class="con-box">
							<div class="head">
								<div class="con">
									
								</div>
							</div>
							<div class="con info-table">
								<div class="con">
									<div class="box">
										<% using (Html.BeginForm("Save", "Home", FormMethod.Post, new { id = "mainForm" }))
										   {%>
										
										
										<div class="action paddingl90">
											<span id="btn-submit" class="sexybutton"><span><span>
												<input type="submit" class="ok" value="添加" /></span></span></span>
										</div>
										<% } %>
									</div>
									<%--<div id="uploadimg-win" class="hide">
											<p class="center padding5">
												图片只能为(.jpg|.gif|.png|.bmp)格式，4M以内
											</p>
											<form id="uploadImgForm" action='<%= Url.Action("UploadImage") %>' method="post"
											enctype="multipart/form-data">
											<p class="center padding5">
												<input type="hidden" id="accountId" name="accountId" value='<%= (Model!=null) ? Model.Key : "" %>' />
												<input type="file" accept="(.jpe?g|.gif|.png|.bmp|.JPE?G|.GIF|.PNG|.BMP)" id="sign-file"
													name="sign" required="required" pattern="(\s|\S)*\.(jpe?g|gif|bmp|png|.JPE?G|.GIF|.PNG|.BMP)" />
											</p>
											</form>
										</div>--%>
								</div>
								<div class="stat">
									<ul class="paging">
										<li title="上一页" class="prev"></li>
										<li title="下一页" class="next"></li>
									</ul>
									总计：100条&nbsp;当前第10页,每页30条</div>
							</div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="StyleContent" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ScriptContent" runat="server">
	<script type="text/javascript" src="/Scripts/tree/jquery.jstree.js"></script>
	<script type="text/javascript" src="/Scripts/tree/jquery.hotkeys.js"></script>
	<script type="text/javascript" src="/Scripts/tree/jquery.cookie.js"></script>
	<script type="text/javascript" charset="utf-8">
		/**
		* @author Administrator
		*/
		/**
		* @author Administrator
		*/
		$(function () {
			$("#tree")
		.jstree({
			// the list of plugins to include

			"plugins": ["themes", "json_data", "ui", "crrm", "dnd", "cookies", "search", "types", "hotkeys", "contextmenu"],
			// Plugin configuration

			// I usually configure the plugin that handles the data first - in this case JSON as it is most common
			"json_data": {
				// I chose an ajax enabled tree - again - as this is most common, and maybe a bit more complex
				// All the options are the same as jQuery's except for `data` which CAN (not should) be a function
				"ajax": {
					// the URL to fetch the data
					"url": '<%: Url.Action("Operation") %>',
					// this function is executed in the instance's scope (this refers to the tree instance)
					// the parameter is the node being loaded (may be -1, 0, or undefined when loading the root nodes)
					"data": function (n) {
						// the result is fed to the AJAX request `data` option
						return {
							"operation": "get_children",
							"id": n.attr ? n.attr("id").replace("node_", "") : null
						};
					}
				}
			},
			"themes": {
				"theme": "apple"
			},
			"types": {
				// I set both options to -2, as I do not need depth and children count checking
				// Those two checks may slow jstree a lot, so use only when needed
				"max_depth": -2,
				"max_children": -2,
				// I want only `drive` nodes to be root nodes 
				// This will prevent moving or creating any other type as a root node
				"valid_children": ["drive"],
				"types": {
					// The default type
					"default": {
						// I want this type to have no children (so only leaf nodes)
						// In my case - those are files
						"valid_children": "none",
						// If we specify an icon for the default type it WILL OVERRIDE the theme icons
						"icon": {
						//"image" : "./file.png"
					}
				},
				// The `folder` type
				"folder": {
					// can have files and other folders inside of it, but NOT `drive` nodes
					"valid_children": ["default", "folder"],
					"icon": {
					//"image" : "./folder.png"
				}
			},
			// The `drive` nodes 
			"drive": {
				// can have files and folders inside, but NOT other `drive` nodes
				"valid_children": ["default", "folder"],
				"icon": {
				//"image" : "./root.png"
			},
			// those options prevent the functions with the same name to be used on the `drive` type nodes
			// internally the `before` event is used
			"start_drag": false,
			"move_node": false,
			"delete_node": false,
			"remove": false
		}
}
},
// For UI & core - the nodes to initially select and open will be overwritten by the cookie plugin

// the UI plugin - it handles selecting/deselecting/hovering nodes
"ui": {
	// this makes the node with ID node_4 selected onload
	"initially_select": ["node_4"]
},
// the core plugin - not many options here
"core": {
	// just open those two nodes up
	// as this is an AJAX enabled tree, both will be downloaded from the server
	"initially_open": ["node_2", "node_3"]
}
})
		.bind("click", function (e) {
			if ($(e.currentTarget).is("a")) {
			
				window.location.href="<%: Url.Action("Edit")%>?id="+$(e.currentTarget).parent().attr("id").replace("node_","");
				
				return true;
			}
		})
		.bind("add.jstree", function (e, data) {
						
				window.location.href="<%: Url.Action("Add")%>?id="+data.rslt.obj.attr("id").replace("node_", "");
				return true;
			
		})
		.bind("create.jstree", function (e, data) {
			$.post(
				'<%: Url.Action("Operation") %>',
				{
					"operation": "create_node",
					"parentid": data.rslt.parent.attr("id").replace("node_", ""),
					"position": data.rslt.position,
					"name": data.rslt.name,
					"type": data.rslt.obj.attr("rel")
				},
				function (r) {
					if (r.status) {
						$(data.rslt.obj).attr("id", "node_" + r.id);
					}
					else {
						$.jstree.rollback(data.rlbk);
					}
				}
			);
		})
		.bind("remove.jstree", function (e, data) {
			data.rslt.obj.each(function () {
				$.ajax({
					async: false,
					type: 'POST',
					url: '<%: Url.Action("Operation") %>',
					data: {
						"operation": "remove_node",
						"id": this.id.replace("node_", "")
					},
					success: function (r) {
						if (!r.status) {
							data.inst.refresh();
						}
					}
				});
			});
		})
		.bind("rename.jstree", function (e, data) {
			$.post(
				'<%: Url.Action("Operation") %>',
				{
					"operation": "rename_node",
					"id": data.rslt.obj.attr("id").replace("node_", ""),
					"name": data.rslt.new_name
				},
				function (r) {
					if (!r.status) {
						$.jstree.rollback(data.rlbk);
					}
				}
			);
		})
		.bind("move_node.jstree", function (e, data) {
			data.rslt.o.each(function (i) {
				$.ajax({
					async: false,
					type: 'POST',
					url: '<%: Url.Action("Operation") %>',
					data: {
						"operation": "move_node",
						"id": $(this).attr("id").replace("node_", ""),
						"ref": data.rslt.np.attr("id").replace("node_", ""),
						"position": data.rslt.cp + i,
						"title": data.rslt.name,
						"copy": data.rslt.cy ? 1 : 0
					},
					success: function (r) {
						if (!r.status) {
							$.jstree.rollback(data.rlbk);
						}
						else {
							$(data.rslt.oc).attr("id", "node_" + r.id);
							if (data.rslt.cy && $(data.rslt.oc).children("UL").length) {
								data.inst.refresh(data.inst._get_parent(data.rslt.oc));
							}
						}
						$("#analyze").click();
					}
				});
			});
		});
		});
	</script>
	<script type="text/javascript" charset="utf-8">
		$(function () {
			$("#mainForm input[type='text'],#mainForm textarea").tooltip({
				position: "center right",
				offset: [-2, 5],
				effect: "fade",
				opacity: 0.7
			});
			$("#StartDate,#EndDate").dateinput({ selectors: true });
			$("#mainForm").validator({ lang: 'zh-CN' });
		});
	 
	</script>
</asp:Content>

